<template>
  <div class="card content-box">
    <el-alert
      title="通过 component :is 组件属性 && v-bind 属性透传，可以将 template 中的 html 代码全部改变为 columns 配置项，具体配置请看代码。"
      type="warning"
      :closable="false"
    />
    <component :is="'el-form'" v-bind="options.form" ref="proFormRef" :model="model">
      <template v-for="item in options.columns" :key="item.prop">
        <component :is="'el-form-item'" v-bind="item.formItem">
          <component :is="`el-${item.attrs.typeName}`" v-bind="item.attrs" v-model="model[item.formItem.prop]" />
        </component>
      </template>
      <el-form-item>
        <slot name="operation"></slot>
      </el-form-item>
    </component>
  </div>
</template>

<script setup lang="ts" name="proForm">
  import { ref } from "vue"

  let model = ref<any>({})

  const options = ref({
    // 表单整体配置项
    form: {
      inline: false,
      labelPosition: "right",
      labelWidth: "80px",
      size: "default",
      disabled: false,
      labelSuffix: " :"
    },
    // 表单列配置项 (formItem 代表 item 配置项，attrs 代表 输入、选择框 配置项)
    columns: [
      {
        formItem: {
          label: "用户名",
          prop: "username",
          labelWidth: "80px",
          required: true
        },
        attrs: {
          typeName: "input",
          clearable: true,
          placeholder: "请输入用户名",
          disabled: true
        }
      },
      {
        formItem: {
          label: "密码",
          prop: "password",
          class: "data"
        },
        attrs: {
          typeName: "input",
          clearable: true,
          autofocus: true,
          placeholder: "请输入密码",
          type: "password"
        }
      },
      {
        formItem: {
          label: "邮箱",
          prop: "email"
        },
        attrs: {
          typeName: "input",
          placeholder: "请输入邮箱",
          clearable: true,
          style: "width:500px"
        }
      }
    ]
  })
</script>

<style scoped lang="scss">
  @import "./index.scss";
</style>
